<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!-- jQuery -->
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        html { overflow-x: hidden; overflow-y: auto; }

        body{
            background-image: url("../images/myInfo.jpg");
            background-repeat: no-repeat;/*设置图片不重复*/
            background-size: cover;/*设置图片平铺*/
        }

        #title{
            background-color: cornflowerblue;
        }

        .row-margin-top {
            margin: 10px;
        }

        .form-horizontal{
            margin: 20px;
        }

        #footer{
            text-align: center;
            font-size: 20px;
            position: absolute;
            bottom: 10px;
        }

        p{
            margin: 10px;
            font-family: 微软雅黑;
            font-size: large;
            border:3px solid black;
            border-radius: 10px;
            text-align: center;
        }
        #main{
            border: solid 1px;
            border-radius: 10px;
        }


        #off{
            margin-top: 10px;
            font-family: 微软雅黑;
            color: black;
        }
    </style>

</head>
<body>
<script>
    function ckeckuserName() {
        //    获取值
        var userName = $("#userName_update_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userName)
        if (flag) {
            //    通过校验
            $("#userName_update_input").css("border", "")
        } else {
            $("#userName_update_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }
    function ckeckuserEmail() {
        //    获取值
        var userEmail = $("#userEmail_update_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userEmail)
        if (flag) {
            //    通过校验
            $("#userEmail_update_input").css("border", "")
        } else {
            $("#userEmail_update_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }
    function ckeckuserPsw() {
        //    获取值
        var userPsw = $("#userPassword_update_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userPsw)
        if (flag) {
            //    通过校验
            $("#userPassword_update_input").css("border", "")
        } else {
            $("#userPassword_update_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }

    $(function () {
        $("#submit").click(function () {
            if(ckeckuserName()&&ckeckuserEmail()&&ckeckuserPsw()) {
                $.ajax({
                    url: "../user/update",
                    type: "post",
                    data: $("#user_update").serialize(),
                    success: function (data) {
                        //alert(data)
                        if (data) {
                            $("#update_span").html('<font color="red">' + data.msg + '</font>')
                            location.href = "http://localhost:8080/cinema/"
                        } else {
                            $("#update_span").html('<font color="red">' + data.msg + '</font>')
                        }
                    }, dataType: "json"
                })
            }
            return false;
        })

        $("#userName_update_input").blur(ckeckuserName);
        $("#userEmail_update_input").blur(ckeckuserEmail);
        $("#userPassword_update_input").blur(ckeckuserPsw);

    })
</script>

<!--页面主体-->
<!--主体-->
<div class="container-fluid">
    <div class="row " id = "title">
        <div class="col-md-1 row-margin-top">
            <button id="back" class="btn btn-info btn-default btn-lg active" ><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>&nbsp;返回</button>
        </div>
        <div class="col-md-6 col-md-offset-3" >
            <h1>欢 迎 光 临 T T M S 影 院</h1>
        </div>

        <div class="col-md-1 row-margin-top col-md-offset-4">
            <a href="../index.html"><button id="off" class="btn btn-link  " ><span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp;注销</button></a>
        </div>

    </div>

    <div class = "row ">
        <div class="col-md-5 col-md-offset-5">
            <h1>我的个人信息</h1>
        </div>
    </div>

    <div class="row row-margin-top" >
        <div class="col-md-5 col-md-offset-4" id="main">
            <span id="update_span"></span>
            <form class="form-horizontal" id="user_update">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control"  id="userName_update_input" placeholder="3-16位中文,英文或数字" name="userName">
                        <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="userPassword_update_input" placeholder="6-16位，必须包含英文和数字" name="userPassword">
                        <span class="help-block"></span>
                    </div>
                </div>

                <!--<div class="form-group">-->
                    <!--<label class="col-sm-2 control-label">确认密码</label>-->
                    <!--<div class="col-sm-10">-->
                        <!--<input type="password" class="form-control" id="checkPassWord" placeholder="6-16位，必须包含英文和数字" name="CheckUserPassword">-->
                        <!--<span class="help-block"></span>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="form-group">
                    <label class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="userEmail_update_input" placeholder="xxx@xx.com" name="userEmail">
                        <span class="help-block"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div  class=" col-md-2 col-md-offset-5" >
            <button  id="submit" class=" btn btn-lg  btn-success" ><span class="glyphicon  glyphicon-ok-sign" aria-hidden="true"></span>修改</button>
        </div>
        <div  class=" col-md-2" >
            <button  id="reset" class=" btn btn-lg  btn-success" ><span class="glyphicon  glyphicon-ok-sign" aria-hidden="true"></span>重置</button>
        </div>
    </div>

    <!--页脚-->
    <div class="row">
        <div id="footer" class="col-md-12">
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
            <span >CopyRight@2020</span>
        </div>
    </div>
</div>
</body>
</html>